<template>
  <view id="edit">
    <NavBar class="navbar" :navList="list" @change="(index) => (current = index)"></NavBar>
    <view v-if="current === 0" class="tabc">
      <BasicTitle></BasicTitle>
    </view>
    <view v-if="current === 1" class="tabc">
      <DetailTitle></DetailTitle>
    </view>
    <view v-if="current === 2" class="tabc">
      <MetaTitle></MetaTitle>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import NavBar from '../../../components/NavBar.vue'
import BasicTitle from '../components/BasicTitle.vue'
import DetailTitle from '../components/DetailTitle.vue'
import MetaTitle from '../components/MateTitle.vue'

const list = ['基本信息', '详细资料', '择偶要求']

const current = ref(0)

watch(current, (newVal) => {
  console.log(newVal)
})
</script>

<style scoped lang="scss">
#edit {
  width: 100%;
  height: 100vh;

  .tabc {
    width: 100%;
    height: 93.7%;
    padding: 3%;
    box-sizing: border-box;
  }
}

.navbar {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

::v-deep .is-input-border {
  border: none !important;
}

::v-deep .uni-easyinput {
  text-align: right;
}

::v-deep.uni-date-x--border {
  border: none;
}

::v-deep.uni-date__x-input {
  flex: none;
}

::v-deep .uni-forms-item {
  display: flex;
  justify-content: space-between;
}

::v-deep.uni-forms-item__content {
  flex: none;
}

::v-deep element.style {
  font-size: 0;
}

::v-deep.uni-forms-item {
  margin-bottom: 5%;
}

::v-deep .uni-forms-item__label {
  font-size: 3vw;
}

::v-deep .uni-easyinput__content-input {
  font-size: 3vw;
}
</style>
